<template>
  <div class="status-section">
    <div class="status-card">
      <h3>Process Log</h3>
      <div class="log-content">
        <div v-for="(log, index) in logs" :key="index" :class="['log-item', log.type]">
          [{{ log.time }}] {{ log.message }}
          <div v-if="log.details" class="error-details">{{ log.details }}</div>
        </div>
      </div>
    </div>
    <div class="status-card">
      <h3>Error Messages</h3>
      <div class="error-content">
        <div v-for="(error, index) in errors" :key="index" class="error-item">
          [{{ error.time }}] {{ error.message }}
          <div v-if="error.details" class="error-details">{{ error.details }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  logs: LogItem[];
  errors: LogItem[];
}>();

interface LogItem {
  time: string;
  message: string;
  type: 'info' | 'warning' | 'error';
  details?: string;
}
</script>

<style lang="less" scoped>
.status-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.status-card {
  background: rgba(255, 255, 255, 0.427);
  border-radius: 8px;
  padding: 8px;
  height: 150px;
  overflow: hidden;
  position: relative; /* 为伪元素定位做准备 */
  
  h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
  }
}

.status-card::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  border-radius: 8px; /* 匹配外层圆角 */
  pointer-events: none; /* 允许点击穿透 */
}

.log-content, .error-content {
  flex: 1;  // 占据剩余空间
  overflow-y: auto;
  max-height: none !important;  // 移除固定高度限制
  max-height: 300px;
  height: calc(100% - 40px);  // 根据标题高度调整
  font-family: consolas;
  font-size: 15px;
  line-height: 1.1;
  text-align: left;
  padding-right: 5px; /* 给滚动条留空间 */
  padding-bottom: 2px; /* 减少底部填充以靠近下边框 */
  scrollbar-gutter: stable;
}

/* 自定义滚动条 */
.log-content::-webkit-scrollbar,
.error-content::-webkit-scrollbar {
  width: 8px;  // 垂直滚动条宽度
  height: 8px; // 水平滚动条高度
  background-color: rgba(0,0,0,0.05);
}

.log-content::-webkit-scrollbar-thumb,
.error-content::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
}

.log-content {
  color: #000;
}

.error-content {
  color: rgb(255, 0, 0);
}

.error-details {
  background: rgba(255,68,68,0.1);
  padding: 8px;
  border-radius: 4px;
  margin-top: 4px;
  white-space: pre-wrap;
}
</style>
